<template>
    <!-- 溯源管理页面主容器 -->
    <div class="traceability-container">
        <!-- 顶部导航栏 -->
        <div class="top-header">
            <!-- 左侧公司名称区域 -->
            <div class="header-left">
                <h1>公司名称</h1>
            </div>
            <!-- 右侧导航区域 -->
            <div class="header-right">
                <!-- 导航按钮组 -->
                <div class="nav-buttons">
                    <span class="nav-button">集团管理</span>
                    <span class="nav-button active">企业管理</span>
                    <span class="nav-button">平台运营</span>
                    <span class="nav-button">系统设置</span>
                </div>
                <!-- 右侧图标区域 -->
                <div class="nav-right">
                    <!-- 通知铃铛图标 -->
                    <el-icon class="nav-icon">
                        <Bell />
                    </el-icon>
                    <!-- 设置图标 -->
                    <el-icon class="nav-icon">
                        <Setting />
                    </el-icon>
                    <!-- 用户图标 -->
                    <el-icon class="nav-icon">
                        <User />
                    </el-icon>
                    <!-- 网格图标 -->
                    <el-icon class="nav-icon">
                        <Grid />
                    </el-icon>
                </div>
            </div>
        </div>

        <!-- 主容器区域 -->
        <div class="main-container">
            <!-- 左侧菜单栏 -->
            <div class="sidebar">
                <!-- 菜单区域 -->
                <div class="menu-section">
                    <!-- 菜单标题 -->
                    <h3>企业管理 2021-07</h3>
                    <!-- 溯源管理菜单项（当前激活） -->
                    <div class="menu-item active" @click="goToTraceabilityList">
                        溯源管理
                    </div>
                    <!-- 溯源详情菜单项 -->
                    <div class="menu-item" @click="goToTraceabilityDetail">
                        溯源详情
                    </div>
                </div>
            </div>

            <!-- 主内容区域 -->
            <div class="main-content">
                <!-- 内容头部区域 -->
                <div class="content-header">
                    <!-- 页面标题 -->
                    <h2>溯源管理</h2>
                    <!-- 操作按钮组 -->
                    <div class="header-actions">
                        <!-- 新增按钮 -->
                        <el-button type="primary" @click="handleAdd">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增
                        </el-button>
                        <!-- 批量删除按钮（当没有选中行时禁用） -->
                        <el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0">
                            <el-icon>
                                <Delete />
                            </el-icon>
                            删除 ({{ selectedRows.length }})
                        </el-button>
                        <!-- 刷新数据按钮 -->
                        <el-button type="success" @click="refreshData">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                            刷新数据
                        </el-button>
                    </div>
                </div>

                <!-- 表格容器 -->
                <div class="table-container">
                    <!-- Element Plus 表格组件 -->
                    <el-table ref="tableRef" :data="tableData" v-loading="loading"
                        @selection-change="handleSelectionChange" stripe border height="calc(100vh - 280px)"
                        style="width: 100%; min-width: 1400px;">
                        <!-- 选择列 -->
                        <el-table-column type="selection" width="55" />
                        <!-- 序号列 -->
                        <el-table-column prop="index" label="序号" width="80" />
                        <!-- 商品名称列 -->
                        <el-table-column prop="productName" label="商品名称" width="150" />
                        <!-- 生产批次列 -->
                        <el-table-column prop="productionBatch" label="生产批次" width="120" />
                        <!-- 保质期列 -->
                        <el-table-column prop="shelfLifeDays" label="保质期(天)" width="100" />
                        <!-- 生产许可证号列 -->
                        <el-table-column prop="productionLicenseNumber" label="生产许可证号" width="180" />
                        <!-- 生产企业列 -->
                        <el-table-column prop="productionEnterprise" label="生产企业" width="200" />
                        <!-- 信息完善度列 -->
                        <el-table-column prop="informationCompleteness" label="信息完善度" width="120" />
                        <!-- 操作列（固定在右侧） -->
                        <el-table-column label="操作" width="320" fixed="right">
                            <template #default="{ row }">
                                <!-- 操作按钮容器 -->
                                <div class="action-buttons-cell">
                                    <!-- 删除按钮 -->
                                    <el-button size="small" type="danger" @click="handleDelete(row)">
                                        删除
                                    </el-button>
                                    <!-- 详情按钮 -->
                                    <el-button size="small" type="primary" @click="goToDetail(row)">
                                        详情
                                    </el-button>
                                    <!-- 修改按钮 -->
                                    <el-button size="small" type="warning" @click="handleEdit(row)">
                                        修改
                                    </el-button>
                                    <!-- 导出按钮 -->
                                    <el-button size="small" type="success" @click="handleExportCode(row)">
                                        导出
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页容器 -->
                <div class="pagination-container">
                    <!-- 分页信息显示 -->
                    <div class="pagination-info">
                        共 {{ pagination.total }} 条
                    </div>
                    <!-- 分页控制区域 -->
                    <div class="pagination-controls">
                        <!-- 每页条数选择器 -->
                        <el-select :model-value="pagination.pageSize" @change="handlePageSizeChange" size="small"
                            style="width: 100px; margin-right: 10px;">
                            <el-option label="5条/页" :value="5" />
                            <el-option label="10条/页" :value="10" />
                            <el-option label="15条/页" :value="15" />
                            <el-option label="20条/页" :value="20" />
                            <el-option label="30条/页" :value="30" />
                            <el-option label="50条/页" :value="50" />
                            <el-option label="100条/页" :value="100" />
                        </el-select>
                        <!-- 分页组件 -->
                        <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                            :total="pagination.total" :layout="'prev, pager, next'" :pager-count="7" small
                            :disabled="loading" @current-change="handleCurrentPageChange"
                            :key="pagination.currentPage" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑/新增对话框 -->
        <el-dialog v-model="editDialogVisible" :title="isEdit ? '修改信息' : '新增信息'" width="600px">
            <!-- 表单区域 -->
            <el-form :model="editForm" label-width="120px">
                <!-- 商品名称输入框 -->
                <el-form-item label="商品名称">
                    <el-input v-model="editForm.productName" />
                </el-form-item>
                <!-- 生产批次输入框 -->
                <el-form-item label="生产批次">
                    <el-input v-model="editForm.productionBatch" />
                </el-form-item>
                <!-- 保质期数字输入框 -->
                <el-form-item label="保质期(天)">
                    <el-input-number v-model="editForm.shelfLifeDays" :min="1" />
                </el-form-item>
                <!-- 生产许可证号输入框 -->
                <el-form-item label="生产许可证号">
                    <el-input v-model="editForm.productionLicenseNumber" />
                </el-form-item>
                <!-- 生产企业输入框 -->
                <el-form-item label="生产企业">
                    <el-input v-model="editForm.productionEnterprise" />
                </el-form-item>
                <!-- 信息完善度输入框 -->
                <el-form-item label="信息完善度">
                    <el-input v-model="editForm.informationCompleteness" />
                </el-form-item>
            </el-form>
            <!-- 对话框底部按钮 -->
            <template #footer>
                <!-- 取消按钮 -->
                <el-button @click="editDialogVisible = false">取消</el-button>
                <!-- 保存按钮 -->
                <el-button type="primary" @click="handleSave">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// Vue 3 Composition API 相关导入
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
// Element Plus 消息提示和确认框组件
import { ElMessage, ElMessageBox } from 'element-plus'
// Vue Router 路由导航
import { useRouter } from 'vue-router'
// Element Plus 图标组件
import { Plus, Delete, Edit, View, Download, Refresh } from '@element-plus/icons-vue'
// HTTP 请求库
import axios from 'axios'

// 路由实例
const router = useRouter()
// API 基础地址
const API_BASE_URL = 'http://localhost:5098'

// 模拟数据数组（包含10个兔肉产品的示例数据）
const mockData = [
    // 兔腿(小)产品数据
    { id: 1, productName: '兔腿(小)', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '100%', coverImageUrl: '' },
    // 兔腿(大)产品数据
    { id: 2, productName: '兔腿(大)', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '60%', coverImageUrl: '' },
    // 兔肉丝产品数据
    { id: 3, productName: '兔肉丝', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '80%', coverImageUrl: '' },
    // 兔肉干产品数据
    { id: 4, productName: '兔肉干', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '70%', coverImageUrl: '' },
    // 兔肉松产品数据
    { id: 5, productName: '兔肉松', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '85%', coverImageUrl: '' },
    // 麻辣兔头产品数据
    { id: 6, productName: '麻辣兔头', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '95%', coverImageUrl: '' },
    // 兔肉丸产品数据
    { id: 7, productName: '兔肉丸', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '75%', coverImageUrl: '' },
    // 兔肉片产品数据
    { id: 8, productName: '兔肉片', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '65%', coverImageUrl: '' },
    // 兔肉块产品数据
    { id: 9, productName: '兔肉块', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '55%', coverImageUrl: '' },
    // 兔肉条产品数据
    { id: 10, productName: '兔肉条', productionBatch: '202107', shelfLifeDays: 90, productionLicenseNumber: 'SC213205427680', productionEnterprise: '成都爱吃兔食品加工有限公司', informationCompleteness: '90%', coverImageUrl: '' }
]

// 响应式数据定义
// 加载状态标识
const loading = ref(false)
// 表格数据数组
const tableData = ref<any[]>([])
// 选中的行数据数组
const selectedRows = ref<any[]>([])
// 编辑对话框显示状态
const editDialogVisible = ref(false)
// 是否为编辑模式（true为编辑，false为新增）
const isEdit = ref(false)
// 表格组件引用
const tableRef = ref()

// 分页数据对象（响应式）
const pagination = reactive({
    currentPage: 1,    // 当前页码
    pageSize: 10,      // 每页显示条数
    total: 0          // 总数据条数
})

// 编辑表单数据对象（响应式）
const editForm = reactive({
    id: undefined,                    // 产品ID（新增时为undefined）
    productName: '',                 // 商品名称
    productionBatch: '',             // 生产批次
    shelfLifeDays: 90,               // 保质期（天）
    productionLicenseNumber: '',     // 生产许可证号
    productionEnterprise: '',        // 生产企业
    informationCompleteness: '',     // 信息完善度
    coverImageUrl: ''               // 封面图片URL
})

// 原生防抖函数（用于优化性能，避免频繁调用）
const debounce = (func: Function, delay: number) => {
    let timeoutId: number  // 定时器ID
    return (...args: any[]) => {
        clearTimeout(timeoutId)  // 清除之前的定时器
        timeoutId = setTimeout(() => func.apply(null, args), delay)  // 设置新的定时器
    }
}

// 加载数据函数（异步）
const loadData = async () => {
    loading.value = true  // 设置加载状态为true
    console.log('开始加载数据，当前分页:', pagination)

    try {
        // 定义多个可能的API端点（容错处理）
        const apiEndpoints = [
            '/api/Traceability/list',
            '/api/Traceability',
            '/api/traceability/list',
            '/api/traceability'
        ]

        let response = null  // 响应对象
        let lastError = null  // 最后一个错误

        // 遍历所有API端点，尝试获取数据
        for (const endpoint of apiEndpoints) {
            try {
                // 构建请求参数
                const params = {
                    PageIndex: pagination.currentPage,  // 当前页码
                    PageSize: pagination.pageSize       // 每页条数
                }

                console.log(`尝试API端点: ${API_BASE_URL}${endpoint}`, params)
                // 发送GET请求
                response = await axios.get(`${API_BASE_URL}${endpoint}`, {
                    params,      // 查询参数
                    timeout: 3000  // 3秒超时
                })

                // 如果响应成功且有数据，跳出循环
                if (response && response.data) {
                    console.log(`API端点 ${endpoint} 成功:`, response.data)
                    break
                }
            } catch (error: any) {
                console.log(`API端点 ${endpoint} 失败:`, error.message)
                lastError = error
                continue  // 继续尝试下一个端点
            }
        }

        if (response && response.data) {
            let items = []
            let total = 0

            // 处理不同的API响应格式
            if (response.data.data && Array.isArray(response.data.data)) {
                items = response.data.data
                total = response.data.totalCount || response.data.total || 0
            } else if (response.data.items && Array.isArray(response.data.items)) {
                items = response.data.items
                total = response.data.totalCount || response.data.total || 0
            } else if (Array.isArray(response.data)) {
                items = response.data
                total = response.data.length
            } else if (response.data.result && Array.isArray(response.data.result)) {
                items = response.data.result
                total = response.data.totalCount || response.data.total || 0
            }

            // 确保数据格式正确
            if (items && items.length > 0) {
                tableData.value = items.map((item: any, index: number) => ({
                    id: item.id || Date.now() + index,
                    productName: item.productName || item.ProductName || '未知商品',
                    productionBatch: item.productionBatch || item.ProductionBatch || '未知批次',
                    shelfLifeDays: item.shelfLifeDays || item.ShelfLifeDays || 0,
                    productionLicenseNumber: item.productionLicenseNumber || item.ProductionLicenseNumber || '未知许可证',
                    productionEnterprise: item.productionEnterprise || item.ProductionEnterprise || '未知企业',
                    informationCompleteness: item.informationCompleteness || item.InformationCompleteness || '0%',
                    coverImageUrl: item.coverImageUrl || item.CoverImageUrl || '',
                    index: (pagination.currentPage - 1) * pagination.pageSize + index + 1
                }))
                pagination.total = total

                console.log('MySQL数据加载成功:', {
                    currentPage: pagination.currentPage,
                    pageSize: pagination.pageSize,
                    total: pagination.total,
                    dataLength: tableData.value.length,
                    apiResponse: response.data
                })

                // 保存到localStorage
                saveTableData()
                savePagination()
                return
            }
        }

        throw lastError || new Error('所有API端点都失败')

    } catch (error: any) {
        console.log('所有API调用失败，使用本地数据或模拟数据:', error.message)

        // 首先尝试从localStorage加载
        const savedTableData = loadFromStorage('traceabilityTableData')
        const savedPagination = loadFromStorage('traceabilityPagination')

        if (savedTableData && savedTableData.length > 0) {
            // 使用本地保存的数据
            tableData.value = savedTableData
            if (savedPagination) {
                Object.assign(pagination, savedPagination)
            }
            console.log('已加载本地保存的数据:', {
                dataLength: tableData.value.length,
                total: pagination.total
            })
        } else {
            // 使用模拟数据
            const startIndex = (pagination.currentPage - 1) * pagination.pageSize
            const endIndex = startIndex + pagination.pageSize
            const pageData = mockData.slice(startIndex, endIndex)

            tableData.value = pageData.map((item: any, index: number) => ({
                ...item,
                index: startIndex + index + 1
            }))
            pagination.total = mockData.length

            // 保存模拟数据到localStorage
            saveTableData()
            savePagination()

            console.log(`使用模拟数据: ${pageData.length} 条数据, 总数: ${mockData.length}`)
        }
    } finally {
        loading.value = false
    }
}

// 分页处理
const handleCurrentPageChange = (page: number) => {
    console.log('页码变化:', page)
    pagination.currentPage = page
    savePagination() // 保存分页信息
    loadData()
}

const handlePageSizeChange = (size: number) => {
    console.log('每页条数变化:', size)
    pagination.pageSize = size
    pagination.currentPage = 1
    savePagination() // 保存分页信息
    loadData()
}

// 强制刷新数据
const refreshData = () => {
    console.log('强制刷新数据')
    // 清除所有缓存
    localStorage.removeItem('traceabilityTableData')
    localStorage.removeItem('traceabilityPagination')
    // 重新加载数据
    loadData()
}

// 选择处理
const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
}

// 新增
const handleAdd = () => {
    isEdit.value = false
    Object.assign(editForm, {
        id: undefined,
        productName: '',
        productionBatch: '',
        shelfLifeDays: 90,
        productionLicenseNumber: '',
        productionEnterprise: '',
        informationCompleteness: '',
        coverImageUrl: ''
    })
    editDialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
    isEdit.value = true
    Object.assign(editForm, { ...row })
    editDialogVisible.value = true
}

// 保存
const handleSave = async () => {
    try {
        if (isEdit.value) {
            // 更新
            console.log('正在更新数据:', editForm)
            const response = await axios.put(`${API_BASE_URL}/api/Traceability/${editForm.id}`, editForm)
            if (response.status === 200) {
                ElMessage.success('修改成功')
                editDialogVisible.value = false
                loadData()
            }
        } else {
            // 新增
            console.log('正在新增数据:', editForm)
            const response = await axios.post(`${API_BASE_URL}/api/Traceability`, editForm)
            if (response.status === 200 || response.status === 201) {
                ElMessage.success('新增成功')
                editDialogVisible.value = false
                loadData()
            }
        }
    } catch (error: any) {
        // 静默处理错误
        console.log('保存失败，使用本地保存')
        if (isEdit.value) {
            const index = tableData.value.findIndex(item => item.id === editForm.id)
            if (index !== -1) {
                tableData.value[index] = { ...editForm }
            }
        } else {
            const newItem = { ...editForm, id: Date.now() }
            tableData.value.unshift(newItem)
        }
        saveTableData() // 保存到localStorage
        editDialogVisible.value = false
        ElMessage.warning('保存成功（本地保存）')
    }
}

// 删除
const handleDelete = async (row: any) => {
    try {
        await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })

        console.log('正在删除数据:', row.id)
        const response = await axios.delete(`${API_BASE_URL}/api/Traceability/${row.id}`)
        if (response.status === 200) {
            ElMessage.success('删除成功')
            loadData()
        }
    } catch (error: any) {
        if (error !== 'cancel') {
            // 静默处理错误
            console.log('删除失败，使用本地删除')
            const index = tableData.value.findIndex(item => item.id === row.id)
            if (index !== -1) {
                tableData.value.splice(index, 1)
            }
            saveTableData() // 保存到localStorage
            ElMessage.warning('删除成功（本地删除）')
        }
    }
}

// 批量删除
const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要删除的记录')
        return
    }

    try {
        await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条记录吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })

        const selectedIds = selectedRows.value.map(row => row.id)
        console.log('正在批量删除数据:', selectedIds)

        const response = await axios.delete(`${API_BASE_URL}/api/Traceability/batch`, {
            data: selectedIds
        })

        if (response.status === 200) {
            ElMessage.success('批量删除成功')
            selectedRows.value = []
            loadData()
        }
    } catch (error: any) {
        if (error !== 'cancel') {
            // 静默处理错误
            console.log('批量删除失败，使用本地删除')
            selectedRows.value.forEach(row => {
                const index = tableData.value.findIndex(item => item.id === row.id)
                if (index !== -1) {
                    tableData.value.splice(index, 1)
                }
            })
            selectedRows.value = []
            saveTableData() // 保存到localStorage
            ElMessage.warning('批量删除成功（本地删除）')
        }
    }
}

// 导出
const handleExportCode = (row: any) => {
    const data = selectedRows.value.length > 0 ? selectedRows.value : [row]
    const csvContent = [
        ['序号', '商品名称', '生产批次', '保质期(天)', '生产许可证号', '生产企业', '信息完善度'],
        ...data.map(item => [
            item.index || item.id,
            item.productName,
            item.productionBatch,
            item.shelfLifeDays,
            item.productionLicenseNumber,
            item.productionEnterprise,
            item.informationCompleteness
        ])
    ].map(row => row.join(',')).join('\n')

    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)
    link.setAttribute('download', `溯源数据_${new Date().toISOString().split('T')[0]}.csv`)
    link.style.visibility = 'hidden'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    ElMessage.success('导出成功')
}

// 导航
const goToTraceabilityList = () => {
    router.push('/traceability')
}

const goToTraceabilityDetail = () => {
    router.push('/traceability/detail/1')
}

const goToDetail = (row: any) => {
    router.push({
        name: 'TraceabilityDetail',
        params: { id: row.id }
    })
}

// 数据持久化工具函数
// 保存数据到localStorage
const saveToStorage = (key: string, data: any) => {
    try {
        localStorage.setItem(key, JSON.stringify(data))  // 将数据序列化后存储
        console.log(`数据已保存到localStorage: ${key}`)
    } catch (error) {
        console.log('保存数据失败，跳过localStorage')  // 静默处理错误
    }
}

// 从localStorage加载数据
const loadFromStorage = (key: string, defaultValue: any = null) => {
    try {
        const data = localStorage.getItem(key)  // 获取存储的数据
        return data ? JSON.parse(data) : defaultValue  // 反序列化或返回默认值
    } catch (error) {
        console.log('加载数据失败，使用默认值')  // 静默处理错误
        return defaultValue
    }
}

// 保存表格数据到localStorage
const saveTableData = () => {
    saveToStorage('traceabilityTableData', tableData.value)
}

// 保存分页信息到localStorage
const savePagination = () => {
    saveToStorage('traceabilityPagination', pagination)
}

// 加载本地数据函数
const loadLocalData = () => {
    // 从localStorage加载表格数据
    const savedTableData = loadFromStorage('traceabilityTableData')
    // 从localStorage加载分页数据
    const savedPagination = loadFromStorage('traceabilityPagination')

    // 如果有保存的表格数据，则使用本地数据
    if (savedTableData && savedTableData.length > 0) {
        tableData.value = savedTableData
        console.log('已加载本地表格数据')
    }

    // 如果有保存的分页数据，则使用本地分页设置
    if (savedPagination) {
        Object.assign(pagination, savedPagination)
        console.log('已加载本地分页数据')
    }
}

// 组件挂载时的初始化函数
onMounted(() => {
    // 优先加载本地数据（提升用户体验）
    loadLocalData()

    // 然后尝试加载API数据（获取最新数据）
    loadData()
})
</script>

<style scoped>
/* 溯源管理页面主容器样式 */
.traceability-container {
    width: 100vw;
    /* 全屏宽度 */
    height: 100vh;
    /* 全屏高度 */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    margin: 0;
    /* 清除外边距 */
    padding: 0;
    /* 清除内边距 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}

/* 顶部导航栏样式 */
.top-header {
    height: 60px;
    /* 固定高度 */
    background: #fff;
    /* 白色背景 */
    border-bottom: 1px solid #e6e6e6;
    /* 底部边框 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: space-between;
    /* 两端对齐 */
    padding: 0 20px;
    /* 左右内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

/* 左侧公司名称样式 */
.header-left h1 {
    margin: 0;
    /* 清除外边距 */
    color: #333;
    /* 深灰色文字 */
    font-size: 20px;
    /* 字体大小 */
}

/* 右侧导航区域样式 */
.header-right {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 20px;
    /* 元素间距 */
}

/* 导航按钮组样式 */
.nav-buttons {
    display: flex;
    /* 弹性布局 */
    gap: 20px;
    /* 按钮间距 */
}

/* 导航按钮样式 */
.nav-button {
    padding: 8px 16px;
    /* 内边距 */
    cursor: pointer;
    /* 鼠标指针 */
    border-radius: 4px;
    /* 圆角 */
    transition: all 0.3s;
    /* 过渡动画 */
}

/* 激活状态的导航按钮样式 */
.nav-button.active {
    background: #409eff;
    /* 蓝色背景 */
    color: white;
    /* 白色文字 */
}

/* 右侧图标区域样式 */
.nav-right {
    display: flex;
    /* 弹性布局 */
    gap: 15px;
    /* 图标间距 */
}

/* 导航图标样式 */
.nav-icon {
    font-size: 18px;
    /* 图标大小 */
    cursor: pointer;
    /* 鼠标指针 */
    color: #666;
    /* 灰色 */
    transition: color 0.3s;
    /* 颜色过渡 */
}

/* 导航图标悬停效果 */
.nav-icon:hover {
    color: #409eff;
    /* 悬停时变蓝色 */
}

.main-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    background: #f5f5f5;
    border-right: 1px solid #e6e6e6;
    padding: 20px 0;
}

.menu-section h3 {
    margin: 0 0 15px 20px;
    color: #666;
    font-size: 14px;
}

.menu-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background: #e6f7ff;
}

.menu-item.active {
    background: #e6f7ff;
    border-left-color: #409eff;
    color: #409eff;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.content-header h2 {
    margin: 0;
    color: #333;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.table-container {
    flex: 1;
    padding: 0 20px;
    overflow: auto;
}

.action-buttons-cell {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 0;
}

.action-buttons-cell .el-button {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 50px;
    height: 28px;
}

.pagination-container {
    padding: 15px 20px;
    background: #fafafa;
    border-top: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    color: #666;
    font-size: 14px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>
